<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tab
        {
            width:33%;
            border: solid 1px green;
            border-collapse: collapse;  
            margin: 5px auto;
        }
        .tab td
        {
            border: solid 1px green;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{info}}</h2>
        <div>
            <input type="text" v-model="info">
        </div>
        <ul>
            <li v-for="(s,i) in students">{{s}} --- {{i}}</li>
        </ul>


        <button  @click="f1">Ok</button>


        <table class="tab">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>生日</td>
                <td>专业</td>
            </tr>
            <tr v-for="s in arr">
                <td>{{s.f_id}}</td>
                <td>{{s.f_name}}</td>
                <td v-if="s.f_sex=='男'">先生</td>
                <td v-else>女士</td>
                <td>{{s.f_birthday}}</td>
                <td v-if="s.f_major_id==1">计算机</td>
                <td v-else-if="s.f_major_id==2">外语</td>
                <td v-else-if="s.f_major_id==3">会计</td>
                <td v-else>法律</td>
            </tr>
        </table>
    </div>

    <script src="js/vue.js"></script>
    <script>        
        let vm = new Vue({
            el: '#app',            
            data:{
                    info:'中国梦',
                    students:['嬴政','刘彻','李世民','赵匡胤','铁木真','朱元璋'],
                    arr:[],
            },
            
            //自定义方法
            methods:{
                f1(){
                    this.arr.push({f_id:1, f_name:'嬴政', f_sex:'男', f_birthday:'1999-5-6',f_major_id:1})
                    this.arr.push({f_id:2, f_name:'刘彻', f_sex:'男', f_birthday:'1999-5-6',f_major_id:2})
                    this.arr.push( {f_id:3, f_name:'武则天', f_sex:'女', f_birthday:'1999-5-6',f_major_id:3})
                    this.arr.push( {f_id:4, f_name:'李世民', f_sex:'男', f_birthday:'1999-5-6',f_major_id:4})

                },
                f2(){

                },
            },
            //生命周期：类似webform的 XX_load( )
            created(){
                this.f1()
            },
        })
    </script>
</body>
</html>